<template>
  <div class="chart-item bg-white">
    <div class="padding font-large chart-item-title">{{ title }}</div>
    <div class="padding">
      <v-chart :option="chartOption" :style="chartStyle"></v-chart>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pie-chart',
  props: {
    title: String,
    info: {
      type: Array,
      default () {
        return []
      }
    },
    chartStyle: {
      type: String,
      default: 'width: 100%;height: 360px;'
    }
  },
  computed: {
    chartOption () {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            top: '10%',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.info
          }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
